<template>
  <div>
    <div class="realtime">
          <p>{{$t('m.home.realtime')}}</p>
          <el-button @click="getRealTimeList('refresh')" type="primary">{{$t('m.home.refresh')}}</el-button>
        </div>
        <div>
          <el-carousel trigger="click" height="200px" :autoplay="false">
            <el-carousel-item>
             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.signinamount')}}</p>
                   <p>{{realTimeList.signinamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="signinfinratio"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{signinfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                     <div slot="content">{{$t('m.home.tips39')}}<br/>{{$t('m.home.tips40')}}<br/>{{$t('m.home.tips41')}}</div>
                     <i class="el-icon-warning-outline"></i>
                   </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.unfinished')}}</p>
                   <p>{{realTimeList.signinunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.finished')}}</p>
                   <p>{{realTimeList.signinfinamount}}</p>
                 </div>
              </div>
             </el-card>

             <el-card>
               <el-row :gutter="25">
                 <el-col :span="12">
                   <p>{{$t('m.home.shelvesamount')}}</p>
                   <p>{{realTimeList.shelvesamount}}</p>
                 </el-col>
                 <el-col :span="12" class="circleBox">
                   <el-progress :show-text="false" type="circle" :width="90" :stroke-width="15" :percentage="shelvesfinratio" status="exception"></el-progress>
                   <div class="circleCenter">
                     <div>{{$t('m.home.rate')}}<br/>{{shelvesfinratio}}%</div>
                   </div>
                   <el-tooltip placement="bottom">
                     <div slot="content">{{$t('m.home.tips42')}}<br/>{{$t('m.home.tips43')}}<br/>{{$t('m.home.tips44')}}</div>
                     <i class="el-icon-warning-outline"></i>
                   </el-tooltip>
                 </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="dataBox">
                 <div>
                   <p>{{$t('m.home.unfinished')}}</p>
                   <p>{{realTimeList.shelvesunfinamount}}</p>
                 </div>
                  <el-divider direction="vertical"></el-divider>
                 <div>
                   <p>{{$t('m.home.finished')}}</p>
                   <p>{{realTimeList.shelvesfinamount}}</p>
                 </div>
              </div>
             </el-card>
            </el-carousel-item>
          </el-carousel>
        </div>
	</div>
</template>
<script>
export default {
  name:'inbound-realtime-dashboard',
  data(){
    return {
      realTimeList:[],
      signinfinratio:0,
      shelvesfinratio:0
    }
  },
  mounted(){
    this.getRealTimeList()
  },
  methods:{
    // 获取出库实时看板统计
    getRealTimeList(state){
      let options = {
        method:'get',
        url:state?`/homepage/timelystatistics`:`/homepage/getexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.realTimeList = data
        this.signinfinratio = parseFloat(this.realTimeList.signinfinratio)
        this.shelvesfinratio = parseFloat(this.realTimeList.shelvesfinratio)
        if(state) return this.callbackMessage(this.$t('m.home.success'),'success')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 实时看板
.realtime {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 24px;
  }
  .el-button {
    height: 40px;
    margin-right: 24px;
    margin-top: 13px;
  }
}
// 轮播图
.el-carousel {
  margin-top: 18px;
}
.el-carousel__item {
    display: flex;
    .el-card {
      margin-left: 20px;
      height: 180px;
      width: 268px;
    }
    .el-row .el-col p {
      &:nth-child(1) {
        font-size: 14px;
        margin-bottom: 10px;
      }
      &:nth-child(2) {
        font-size: 32px;
      }
    }
}
// 隐藏轮播图两侧按钮
::v-deep .el-carousel__arrow {
  display: none;
}
.circleBox {
  position: relative;
  top: -12px;
  left: 8px;
  text-align: center;
  width: 90px;
  .el-icon-warning-outline {
    font-size: 14px;
    position: absolute;
    right: -28px;
    top: 0;
  }
}
.circleCenter {
  position: absolute;
  top: 31px;
  left: 42px;
}
.el-divider--horizontal {
  margin-top: -5px;
}
.dataBox {
  display: flex;
  justify-content: space-around;
  p {
    margin-left: 12px;
    margin-right: 18px;
    font-size: 15px;
    &:nth-child(1) {
      margin-top: -14px;
      margin-bottom: 5px;
    }
  }
}
.el-divider--vertical {
  height: 32px;
  margin-top: -5px;
}
</style>